<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clock {
            position: relative;
            margin: 50px auto;
            width: 30rem;
            height: 30rem;
            border: 20px solid black;
            border-radius: 50%;
        }

        .clock:after {
            content: '';
            width: 1.2em;
            height: 1.2em;
            left: 50%;
            top: 51%;
            position: absolute;
            display: block;
            background-color: #a8c5d1;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .pointer {
            position: absolute;
            top: 50%;
            right: 50%;
            transform-origin: 100% 50%;
            /* 轴心 */
            transform: rotate(90deg);
            /* 初始90度 */
        }

        .hour {
            width: 23%;
            height: 13px;
            background-color: darkslategrey;
            border-bottom-left-radius: .5em;
            border-top-left-radius: .5em;
            transform: rotate(90deg);
            transition: all 3s;
            /* 过渡 */
        }

        .min {
            width: 38%;
            height: 8px;
            background-color: grey;
            border-bottom-left-radius: .5em;
            border-top-left-radius: .5em;
            transform: rotate(90deg);
            transition: all 1s cubic-bezier(0.9, 0.54, 0.26, 1.68);
            /* cubic-bezier设置回弹效果 */
        }

        .second {
            width: 47%;
            height: 4px;
            background-color: red;
            border-bottom-left-radius: .5em;
            border-top-left-radius: .5em;
            transform: rotate(90deg);
            transition: all 0.5s cubic-bezier(0.9, 0.54, 0.26, 1.68);
        }
    </style>
</head>

<body>
    <div class="clock">
        <div class="pointer hour"></div>
        <div class="pointer min"></div>
        <div class="pointer second"></div>
    </div>
    <script>
        const hourPointer = document.querySelector('.hour');
        const minPointer = document.querySelector('.min');
        const secondPointer = document.querySelector('.second');

        window.onload = function () {
            setDate(); // 刷新时就初始化
        };

        function setDate() {
            const now = new Date();

            const min = now.getMinutes();
            const minDeg = (min / 60 * 360) + 90; // 因为初始角度是90度, 所以需要加上

            const second = now.getSeconds();
            const secondDeg = (second / 60 * 360) + 90;

            const hour = now.getHours();
            const hourDeg = ((hour / 12 * 360) + (min / 60 / 12 * 360)) + 90;

            console.log(hour, min, second);

            // 60s时, 会跳帧
            // 在发生跳顿的角度值处，将 CSS 的 `transition` 属性去掉
            if (secondDeg === 90) secondPointer.style.transition = 'all 0s';
            else secondPointer.style.transition = 'all 0.5s cubic-bezier(0.9, 0.54, 0.26, 1.68)';

            if (minDeg === 90) minPointer.style.transition = 'all 0s';
            else minPointer.style.transition = 'all 1s cubic-bezier(0.9, 0.54, 0.26, 1.68)';

            minPointer.style.transform = `rotate(${minDeg}deg)`;
            secondPointer.style.transform = `rotate(${secondDeg}deg)`;
            hourPointer.style.transform = `rotate(${hourDeg}deg)`;
        }
        setInterval(setDate, 1000); // 每秒更新一次
    </script>
</body>

</html>